<!--
 This file is part of js-cellularautomata.

    js-cellularautomata is free software: you can redistribute it and/or modify
    it under the terms of the GNU General Public License as published by
    the Free Software Foundation, either version 3 of the License, or
    (at your option) any later version.

    js-cellularautomata is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    GNU General Public License for more details.

    You should have received a copy of the GNU General Public License
    along with js-cellularautomata.  If not, see <http://www.gnu.org/licenses/>.
-->

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> js-cellularautomata: A JavaScript Library for Cellular Automata</title>
<script type="text/javascript" src="./js-automata.js"> </script>
<style type="text/css">
table.automaton {
    width:auto;
	border:1px;
}
span#IntroText { font-size:12px; font-family: Verdana}
table.automaton td.cell0{ width:8px; height:1px;background-color:yellow; }
table.automaton td.cell1{ width:8px; height:1px;background-color:red; }
#automatonSel {background-color:blue; color:yellow; font-size:12px;}

div#automatonDiv { text-align:center; width:100%}
</style>
</head>


<body onload="reDrawAutomaton(document.getElementById('automatonSel'));">

<span id="IntroText">
Welcome to Binod's automata playground! I just learned the basics of cellular automata, and created this
test phase to try a few ideas.

The list allows you to select a rule, and redraws an automata based on the rule.

The algorithm is:
For each row (N times)
   -For each cell, apply the selected rule to the cell on the left, and one on the right
   -Set color of each cell to yellow or red based on the outcome of the rule
</span>

<br/>

<select id="automatonSel" onchange="reDrawAutomaton()">
<option value="rule1">Rule1 ( if (i1==0 && i3==0) i2=0; else i2=1;)</option>
<option value="rule2">Rule2</option>
<option value="rule3">Rule3</option>
</select>
<br/>

<label for="rowsize">Rows</label><input type="text" id="rowsize" value="10" />
<label for="colsize">Cols</label><input type="text" id="colsize" value="50" />
<input type="button" id="updatebtn" value="update" onclick="reDrawAutomaton()"/>

<br/>
<div id="automatonDiv"></div>

</body>
</html>
